<!-- 我的出差文本明细 -->
<template>
  <div class="detail-list">
    <!--<div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>-->
    <div class="displayflex detail-list-line">
      <div class="label">申请人</div>
      <div class="flex1">{{detailCtx.applicant}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">部门名称</div>
      <div class="flex1">{{detailCtx.deptname}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">同行人</div>
      <div class="flex1">{{detailCtx.trippartner || '--'}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">开始时间</div>
      <div class="flex1">{{detailCtx.applydate | timeReplaceT}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">结束时间</div>
      <div class="flex1">{{detailCtx.enddate | timeReplaceT}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">交通工具</div>
      <div class="flex1">{{detailCtx.transportationtext}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">出差类型</div>
      <div class="flex1">{{detailCtx.triptypetext}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">项目名称</div>
      <div class="flex1">{{detailCtx.projectname || '--'}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">出差目的</div>
      <div class="flex1">{{detailCtx.destination}}</div>
    </div>
    <div class="displayflex detail-list-line">
      <div class="label">出差计划</div>
      <div class="flex1">{{detailCtx.planinfo}}</div>
    </div>
    <div class="displayflex detail-list-line" v-if="detailCtx.remark">
      <div class="label">机票申请说明</div>
      <div class="flex1">{{detailCtx.remark}}</div>
    </div>
    <attachment :attaches="attaches"></attachment>
    <template v-if="showBtn">
      <template v-if="btnGroup">
        <div class="btn-large" v-if="btnGroup.wfrevoke" @click="revoke">撤 回</div>
        <div class="btn-group displayflex" v-if="btnGroup.wfaudit">
          <div class="flex1 save"  @click="showDig('Y')">审 核</div>
          <div class="flex1 submit" @click="showDig('N')">驳 回</div>
        </div>
      </template>
      <div class="btn-large disable" v-else>请前往电脑端审核</div>
    </template>
    <!-- 驳回理由弹框 -->
    <x-dialog v-model="showrefuse">
      <div class="dialog-settle">
        <div class="pop-txtarea">
          <textarea :placeholder="placeholderValue" maxlength="200" v-model="rejectreason"></textarea>
        </div>
        <i class="iconfont icon-close" @click="showrefuse=false;"></i>
        <div class="btn" @click="audit(auditValue)">确定</div>
      </div>
    </x-dialog>
  </div>
</template>
<script>
import attachment from "@/components/share/attachment.vue";
export default {
  components:{
    attachment
  },
  props:{
    flowList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      detailCtx:'',
      attaches:'',
      // showLoad:true,
      btnGroup:'',
      showrefuse:false,
      rejectreason:'',
      auditValue:'',//Y审核，N驳回
      placeholderValue:'',
      showBtn:false
    };
  },
  computed: {
    guid(){
      return this.$route.query.guid || '';
    },
    bizdataguid(){
      return this.$route.query.bizdataguid || '';
    },
    userInfo(){
      return localStorage.UserInfo?JSON.parse(localStorage.UserInfo):'';
    },
    // -----------------缓存start
    indexNum(){
      return this.$route.query.indexNum;
    }
    // -----------------缓存end
  },
  created() {
    this.getData();
  },
  methods: {
    getData(){
      var data = {
            "guid": this.bizdataguid || this.guid
          };
      var _this = this;
      this.$emit("showLoadDetail", true);
      this.Ajax.post('BizTripService/GetBizTripApplyById',data).then(function(resp) {
        if(resp.code == 'SUCC'){
          _this.detailCtx = JSON.parse(resp.data);
          console.log(_this.detailCtx.attaches);
          _this.attaches = _this.detailCtx.attaches?JSON.parse(_this.detailCtx.attaches):'';
          
          _this.getBtn();
        }else{
          _this.$emit("showLoadDetail", true);
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        };
      });
    },

    //判断按钮权限（提交 撤回 审核）
    getBtn(){
      var data = {
            "bizguid": this.bizdataguid || this.guid,
            // 可用场景 MyBizTripApply,BizTripAudit
            "pagekey": (this.detailCtx.staffid == this.userInfo.staffid)?"MyBizTripApply":"BizTripAudit",
            "staffid": this.userInfo.staffid,
            "todoguid": this.bizdataguid?this.guid:''
          };
      var _this = this;
      this.Ajax.post('BizTripService/WFAvailableButtons',data).then(function(resp) {
        _this.$emit("showLoadDetail", false);
        if(resp.code == 'SUCC'){
          _this.showBtn = resp.data?true:false;
          _this.btnGroup = resp.data?JSON.parse(resp.data):'';
        }else{
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      });
    },
    
    //撤回
    revoke(){
      this.$emit("showLoadDetail", true);
      var data = {
                "bizguid": this.bizdataguid || this.guid,
                "pagekey": "MyBizTripApply", // 可用场景 MyBizTripApply    BizTripAudit
                "staffid": this.userInfo.staffid,
                "todoguid": ""
            };
      var _this = this;
      
      this.Ajax.post('BizTripService/Revoke',data).then(function(resp) {
        _this.$emit("showLoadDetail", false);
        if(resp.code == 'SUCC'){
          _this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: "申请撤销成功",
            onHide () {
              // -----------------缓存start
              sessionStorage.setItem('dealtIndex', _this.indexNum);
              // -----------------缓存end
              _this.$router.go(-1);
            }
          });
        }else{
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      });
    },
    //显示弹框
    showDig(val){
      this.showrefuse = true;
      this.auditValue = val;
      if(val == 'Y'){
        this.placeholderValue = '审核原因（最多200字，非必填）';
      }else if(val == 'N'){
        this.placeholderValue = '驳回原因（最多200字）';
      };
    },
    //审核/驳回
    audit(value){
      var _this = this, txt;

      let pos = 0,
          execName = this.userInfo.name;
      var data = {
            "bizguid": this.bizdataguid || this.guid,
            "pagekey": "BizTripAudit",// 可用场景 MyBizTripApply    BizTripAudit
            "staffid": this.userInfo.staffid,
            "todoguid": this.guid,
            "result": value,
            "rejectreason": this.rejectreason
          };
      if(value=='Y'){
        txt = '审核成功';
      }else if(value=='N'){
        txt = '驳回成功';
        if(!this.rejectreason){
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请输入驳回理由"
          });
          return false;
        }
      };
      this.$emit("showLoadDetail", true);
      this.Ajax.post('BizTripService/Audit',data).then(function(resp) {
        _this.$emit("showLoadDetail", false);
        if(resp.code == 'SUCC'){
          _this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: txt,
            onHide () {
              // -----------------缓存start
              sessionStorage.setItem('dealtIndex', _this.indexNum);
              // -----------------缓存end
              _this.$router.go(-1);
            }
          });
        }else{
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      });
    }
  }
};
</script>